<template>
  <div class="portal-body">
    <!--  页头部分  -->
    <div class="custom-layout-header">
      <default-header />
    </div>
    <!--  内容部分   -->
    <div class="custom-layout-content">
      <div class="content-body">
        <component
          :is="templateName"
          v-if="templateName && tempEntity"
          :show-header="true"
          :temp="tempEntity"
          :params="params"
        />
      </div>
    </div>
    <!--  页脚部分内容  -->
    <div class="custom-layout-footer">
      <default-footer />
    </div>
    <!-- 固定显示项 -->
    <!--    <div class="custom-layout-affix">
      <default-affix />
    </div>-->
  </div>
</template>
<script>
import { queryOne, queryGuestOne } from '@/api/portal/manager/entityTemp/index'
import { getToken } from '@/utils/auth'
import DefaultCommonBody from '@/portal4.1/pc/component/common/body/DefaultCommonBody.vue'
import DefaultHeader from '@/portal4.1/pc/component/common/header/DefaultCommonHeader.vue'
import DefaultFooter from '@/portal4.1/pc/component/footer/DefaultFooter.vue'
// import DefaultAffix from '@/portal4.1/pc/component/affix/DefaultAffix.vue'
// import { layout } from '@/mixins/layout'
export default {
  name: 'Open',
  components: { DefaultFooter, DefaultHeader, DefaultCommonBody
  }, // 新闻类列表详情页面
  data() {
    return {
      loading: false,
      templateName: null,
      params: [],
      tempEntity: null
    }
  },
  mounted() {
    window.addEventListener(
      'storage',
      e => {
        // e只是一个传参
        // 获取被修改的键值
        if (e.key === 'themes') {
          // 分别打印会发现内容一致
          // console.log(e.storageArea.themes);
          console.log(localStorage.themes)
          this.$store
            .dispatch('GetThemes')
            .then(res => {
              return true
            })
            .catch(error => {
              console.log(error)
            })
          // this.$store.getters.theme = JSON.parse(localStorage.themes);
          // 此行代码只在Chrome浏览器中有效
          console.log(e.storageArea === localStorage) // 输出true
        }
      },
      false
    )
  },
  created() {
    const app = document.querySelector('body')
    const theme = this.$store.getters.theme === undefined ? 'default' : this.$store.getters.theme
    console.log('主题', this.$store.getters.theme)
    app.classList.add('theme-' + theme + '-content')
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      if (getToken()) {
        queryOne({ id: this.$route.query.temp })
          .then(res => {
            const { data } = res
            this.tempEntity = data
            const query = this.$route.query
            const keys = Object.keys(query)
            const values = Object.values(query)
            if (keys !== null && keys.length > 0) {
              for (let i = 0; i < keys.length; i++) {
                if (keys[i] !== 'temp') {
                  this.params.push({ code: keys[i], value: values[i] })
                }
              }
            }
            const path = '/' + this.tempEntity.ssdl + '/' + this.tempEntity.mbmc
            this.templateName = () => import(`@/template/entityTemp${path}`)
            this.loading = false
          })
          .catch(() => {
            console.log('查询详情失败！')
            this.loading = false
          })
      } else {
        queryGuestOne({ id: this.$route.query.temp })
          .then(res => {
            const { data } = res
            this.temp = data
            this.loading = false
          })
          .catch(() => {
            console.log('查询详情失败！')
            this.loading = false
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.portal-body {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: column nowrap;
}
.custom-layout-header {
  height: 300px;
  width: 100%;
  position: absolute;
}
.custom-layout-content {
  flex: 1 1;
  width: 100%;
  padding-top: 325px;
  padding-bottom: 40px;
  box-sizing: border-box;
}
.custom-layout-affix {
  width: 66px;
  position: fixed;
  top: 250px;
  right: 8px;
  z-index: 1;
  min-height: 66px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background-color: var(--edu-bk-100);
}
.custom-layout-footer {
  width: 100%;
  height: 170px;
}
.content-body {
  min-width: 75rem;
  padding: 0 calc(50% - 40.8rem);
  position: relative;
  min-height: 672px;
  height: auto;
}
</style>
